<template>
  <div>
    <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>HPC</el-breadcrumb-item>
          <el-breadcrumb-item>资源使用总表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>

    <el-card class="box-card">
      <!-- HPC信息区域 -->
       <el-row :gutter="10">
        <el-col :span="3">
            <el-select placeholder="选择筛选条件" v-model="searchCondition">
                <el-option value="userName" label="用户名">用户名</el-option>
                <el-option value="userType" label="用户类型">用户类型</el-option>
                <el-option value="partitionName" label="分区名">分区名</el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-input :placeholder="placeholder" v-model="name" :clearable="true" @clear="clearCheck">
                <el-button slot="append" icon="el-icon-search" @click="checkName"></el-button>
            </el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="addUr">添加资源使用表</el-button>
        </el-col>
        <el-col :span="1" :push="4">
            <el-button type="primary" @click="exportTemplate">模板</el-button>
        </el-col>
        <el-col :span="1" :push="5">
          <el-upload class="upload-demo" action="http://222.240.49.66:11501/api/hpc/importExecl" 
                    :on-success="uploadFile" :show-file-list='false'>
            <el-button type="primary">导入</el-button>
          </el-upload>
        </el-col>
        <el-col :span="1" :push="6">
            <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
        <el-col :span="2" :push="7">
            <el-button type="danger" @click="removeVisible = true">批量删除</el-button>
        </el-col>
	    </el-row>

        <el-table :data="tableData" :border='false' stripe @selection-change="selsChange" 
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="用户名" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>{{scope.row.userName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="用户类型">
            <template slot-scope="scope">
                <div>{{scope.row.userType}}</div>
            </template>
        </el-table-column>
        <el-table-column label="分区名">
            <template slot-scope="scope">
                <div>{{scope.row.partitionName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="资源使用情况">
            <template slot-scope="scope">
                <div>{{scope.row.useNode}}节点/ {{scope.row.useCpu}}万核时/ {{scope.row.useStorage}}TB</div>
            </template>
        </el-table-column>
        <el-table-column label="剩余资源数量">
            <template slot-scope="scope">
                <div>{{scope.row.surplusNode}}节点/ {{scope.row.surplusCpu}}万核时/ {{scope.row.surplusStorage}}TB</div>
            </template>
        </el-table-column>
        <el-table-column label="合同状态" :filters="[{ text: '进行中', value: true }, { text: '已过期', value: false }]"
                        :filter-method="filterStatus" :filter-multiple='false'
                        filter-placement="bottom-end">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status ? 'success' : 'danger'">
                    {{scope.row.status ? '进行中' : '已过期'}}
                    </el-tag>
            </template>
        </el-table-column>
         <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
                <el-button type="primary" size="small" plain @click="modify(scope.row)">编辑</el-button>
                <el-button type="info" size="small" plain @click="check(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageInfo.pagenum" :page-sizes="[10]" :page-size="pageInfo.pagesize" :total ="pageInfo.totalCount"
			        @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" background >
			</el-pagination>
    </el-card>

    <add-ur ref="AddUr" @fetchData="getList"></add-ur>
    <contract-dialog ref="ContractDialog" :message="tableInfo"></contract-dialog>
    <modify-ur ref="ModifyUr" :message="tableInfo" @fetchData="getList"></modify-ur>

    <el-dialog title="提示" :visible.sync="removeVisible" width="30%">
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="removeVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import ContractDialog from './components/ContractDialog';
import AddUr from './components/AddUr';
import ModifyUr from './components/ModifyUr';
export default {
  data() {
    return {
      activeName: '1',
      pageInfo: {
        currPage: 0,
        pageSize: 0,
        totalCount: 0,
        totalPage: 0
      },
      queryInfo: {
        limit: 10,
        page: 1,
        userName: '',
        userType: '',
        partitionName: ''
      },
      hpclist: [],
      name: '',
      total: 0,
      tableData: [],
      tableInfo: {},
      sels: [],
      searchCondition: 'userName',
      placeholder: '请输入用户名',
      removeVisible: false
    };
  },
  created() {
      this.getList();
  },
  components: {
    ContractDialog,
    AddUr,
    ModifyUr,
  },
  watch: {
      searchCondition(){
          if(this.searchCondition == 'userName'){
              this.placeholder = '请输入用户名'
          }else if(this.searchCondition == 'userType'){
              this.placeholder = '请输入用户类型'
          }else {
              this.placeholder = '请输入分区名'
          }
      }
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    addUr(){
        this.$refs['AddUr'].isShow = true;
    },
    async getList() {
      const { data: res } = await this.$http.get("hpc/list", {params: this.queryInfo});
      if (res.code !== 200) {
        return this.$message.error("获取数据失败！");
      }
      console.log('tssw', res);
      this.total = res.data.totalPage;
      this.pageInfo.currPage = res.data.currPage;
      this.pageInfo.pageSize = res.data.pageSize;
      this.pageInfo.totalCount = res.data.totalCount;
      this.pageInfo.totalPage = res.data.totalPage;
      this.hpclist = res.data.list;
      let newTime = new Date();
      for(let i = 0; i < this.hpclist.length; i++){
          if(this.hpclist[i].userType == '包节点'){
              if( newTime > this.hpclist[i].contractEndTime){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }else{
              if( this.hpclist[i].surplusCpu <= 0 ){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }
      }
      this.tableData = this.hpclist;
      
      console.log('ts',this.hpclist);
    },
    async check(row) {
        const { data: res } = await this.$http.get(`contract/${row.contract.id}`);
            if (res.code !== 200) {
                return this.$message.error("获取数据失败！");
            }
            this.tableInfo = res
        this.$refs['ContractDialog'].show();
    },
    async modify(row) {
        const { data: res } = await this.$http.get(`hpc/${row.id}`);
            if (res.code !== 200) {
                return this.$message.error("获取数据失败！");
            }
            console.log('tet', res);
            this.tableInfo = res
        this.$refs['ModifyUr'].show();
    },
    uploadFile() {
      this.$message.success("上传成功")
      this.getList()
    },
    exportTemplate() {
      window.open('http://222.240.49.66:11501/api/hpc/template','数据')
    },
    exportExcel() {
      window.open('http://222.240.49.66:11501/api/hpc/export','数据')
    },
    checkName() {
      if(this.searchCondition == 'userName'){
              this.queryInfo.userName = this.name
          }else if(this.searchCondition == 'userType'){
              this.queryInfo.userType = this.name
          }else {
              this.queryInfo.partitionName = this.name
          }
      this.getList()
    },
    clearCheck() {
        this.tableData = this.hpclist;
        this.name = '';
    },
    filterStatus(value, row) {
        return row.status === value;
    },
	//监听页码值改变的事件
	handleCurrentChange(newPage) {
		this.queryInfo.page = newPage
		this.getList()
	},
    selsChange(sels) { 
    this.sels = sels;
    },
    async remove(row) {
      let ids = [];
      row.forEach(element => {
        ids.push(element.id)
      });
      const { data: res } = await this.$http.delete("hpc", {data:ids});
      if (res.code !== 200) {
        return this.$message.error("操作失败！");
      }
      this.getList()
    },
    removeConfirm() {
        this.remove(this.sels)
        this.removeVisible = false
    }
  },
};
</script>

<style lang="less" scoped>
</style>